<template>
  <div>
    <one-map :baseLayers="baseLayers" @oneMapInstanceComplete="oneMapInstanceComplete"></one-map>
    <dataModule></dataModule>
    <editAttribute ref="editTable"></editAttribute>
    <mapToolbar></mapToolbar>
    <dataInput></dataInput>
    <data-edit ref="data-edit"></data-edit>
  </div>
</template>

<script>
  import OneMap from "@/components/map/OneMap";
  import DataModule from "@/pages/sjwh/components/dataModule";            //地图功能
  import EditAttribute from "@/pages/sjwh/components/editAttribute";    //属性表
  import MapToolbar from "@/pages/sjwh/components/mapToolbar";          //工具栏
  import DataInput from "@/pages/sjwh/components/dataInput";            //数据输入
  import '@/assets/mapbox/libs/draw/mapbox-gl-draw.css';
  import MapBoxDraw from '@/assets/mapbox/libs/draw/mapbox-gl-draw.js';

  import HgcMapBoxUtil from "@/assets/js/mapboxgl";
  import MapService from "@/pages/sjwh/components/mapservice";
  import {mapState} from "vuex";
  import BoxUtil from "@/assets/js/utils/BoxUtil";
  import DataEdit from '@/pages/sjwh/components/dataEdit';


  export default {
    name: "index",
    components: {
      OneMap,
      DataModule,
      EditAttribute,
      MapToolbar,
      DataInput,
    
      DataEdit
    },
    data: function () {
      return {
        mapService: undefined
      };
    },
    methods: {
      /**
       * 一张图实例化完成
       * @param map
       */
      oneMapInstanceComplete(map) {
        let mapBoxUtil = new HgcMapBoxUtil(map);
        this.mapService = new MapService(mapBoxUtil); //实例化地图基础操作类
        this.mapService.on("map.init", this.mapInitComplete); //绑定地图加载完成事件

        this.$store.commit("sjwh/setMap", map); //保存一张Map
        this.$store.commit("sjwh/setSjwhMapService", this.mapService); //保存一张Map
        map.on("draw.create", this.drawCreateEvent.bind(this)); //要素添加
        map.on("draw.delete", this.drawDeleteEvent.bind(this)); //要素删除
        map.on("draw.update", this.drawUpdateEvent.bind(this)); //要素更新
        map.on("click", this.featureClickEvent.bind(this));
        this.mapClickEvent = this.mapClickEvent.bind(this, map);
        this.mapService.on("map.click", this.mapClickEvent);
        //this.initPopwin(map);
      },
      /**
       * 地图style.load加载完成
       */
      mapInitComplete(map) {
        const drawControl = new MapBoxDraw({
          displayControlsDefault: false,
          defaultMode: "simple_select",
          controls: {trash: true}, //显示默认的删除的按钮
        });
        map.addControl(drawControl);
        this.$store.commit("sjwh/setDrawControl", drawControl); //保存drawControl
      },
      /**
       * 添加要素，向服务中添加
       * @param e
       */
      drawCreateEvent(e) {
     
      },
      /**
       * 删除要素
       * @param e
       */
      drawDeleteEvent(e) {
       
      },
      /**
       * 更新要素
       * @param e
       */
      drawUpdateEvent(e) {
     
      },
      /**
       * 选中要素
       * @param e
       */
      featureClickEvent(e) {
  

      },
      /**
       *
       * 选择事件
       * @param map
       * @param e
       * @param id
       */
      mapClickEvent(map, e, param) {


      }
     
    },
    computed: {
      ...mapState({
        baseLayers(state) {
          return state.user.baseLayers;
        },
        drawControl(state){
          return state.sjwh.drawControl;
        }
      })
    },
    mounted() {
      this.$store.dispatch("sjwh/ListFSs").then(res => {
      });
    },
    beforeDestroy() {
      this.mapService.off("map.init", this.mapInitComplete); //解绑地图加载完成事件
      this.$store.commit("sjwh/setEditTableVisible", undefined);
      this.$store.commit("sjwh/setSelectFeature", undefined);
      this.$store.commit("sjwh/setFeaturesCache", {});
      this.$store.commit("sjwh/setFeatureCollection", []);
      this.map = undefined;
    }
  };
</script>

<style>
</style>
